import React             from 'react';
import PageTitle         from 'component/page-title/index.jsx';
import Product           from 'service/product-service.jsx';
import MUtil             from 'util/mm.jsx';
import CategorySelector  from './category-selector.jsx';
import './save.scss';
const _product = new Product();
const _mm   = new MUtil();

class ProductDetail extends React.Component{
     constructor(props){
     	super(props);
     	this.state = {
            id               : this.props.match.params.pid,
            subtitle         : '',
            detail           : '',
            name             : '',
     		categoryId       : 0,
     		parentCategoryId : 0,
            subImages        : [],
            price            : '',
            stock            : '',
            status           : 1//状态为1为在售状态
     	}
     }
     componentDidMount(){
        this.loadProuct();
     }
     //加载商品详情
     loadProuct(){
        //id存在表示编辑功能需要表单回填
        if(this.state.id){
            _product.getProduct(this.state.id).then(res => {
                let images = res.subImages.split(',');
                res.subImages = images.map((imgUri) => {
                    return {
                        uri : imgUri,
                        url : res.imageHost + imgUri
                    }
                });
                this.setState(res);
            },errMsg => {
                _mm.errorTips(errMsg);
            });
        }
     }
     
     render(){
        return (
           <div id="page-wrapper">
                <PageTitle title="添加商品"/>
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品名称</label>
                        <div className="col-sm-5">
                            <p className="form-control-static">{this.state.name}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品描述</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.subtitle}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">所属分类</label>
                        <CategorySelector categoryId={this.state.categoryId} parentCategoryId={this.state.parentCategoryId} readOnly/>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品价格</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                value={this.state.price} readOnly />
                                <span className="input-group-addon">元</span>
                            </div> 
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品库存</label>
                        <div className="col-md-3">
                            <div className="input-group">
                                <input type="number" className="form-control"
                                value={this.state.stock} readOnly />
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品图片</label>
                        <div className="col-md-10">
                            { this.state.subImages.length > 0 ? this.state.subImages.map((image,index) => 
                                (<div key={index} className="img-con"><img className="img" src={image.url} /></div>))
                                : (<div>暂无图片</div>)}
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-sm-2 control-label">商品详情</label>
                        <div className="col-md-10" dangerouslySetInnerHTML={{__html:this.state.detail}}>{/*dangerouslySetInnerHTML将html字符串转换为html*/}
                        </div>
                    </div>
                </div>
           </div>
         );
     }
}


export default ProductDetail;
